<template>
  <div class="screen clearfix">
    <div class="search-form">
      <el-form ref="form" label-width="80px">
        <el-row>
          <el-col v-bind="colLayout" v-for="item in searchList" :key="item" :style="formItemStyle">
            <el-form-item :label="item.label">
              <template v-if="item.type === 'select'">
                <el-select
                  placeholder="请选择"
                  style="width: 100%"
                  v-model="formdata[`${item.filed}`]"
                >
                  <el-option
                    v-for="option in item.data"
                    :key="option.id"
                    :label="option.name"
                    :value="option.id"
                  >
                  </el-option>
                </el-select>
              </template>
              <template v-else-if="item.type === 'input'">
                <el-input :placeholder="item.placeholder" v-model="formdata[`${item.filed}`]" />
              </template>
              <template v-else-if="item.type === 'time'">
                <!-- value-format="x"   x表示转为时间戳  毫秒 -->
                <el-date-picker
                  v-model="formdata[`${item.filed}`]"
                  style="width: 100%"
                  type="datetimerange"
                  format="YYYY-MM-DD"
                  value-format="x"
                  is-range
                  range-separator="至"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                />
              </template>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <slot name="footer" />
  </div>
</template>

<script lang="ts" setup>
import { PropType, defineProps, computed, defineEmits, ref } from "vue"
import type { IRadioItem } from "../types"
const props = defineProps({
  searchList: {
    type: Array as PropType<IRadioItem[]>,
    default: () => {
      return []
    }
  },
  searchData: {
    type: Object,
    required: true
  },
  colLayout: {
    type: Object,
    default: () => {
      return {}
    }
  },
  formItemStyle: {
    type: Object,
    default: () => {
      return {
        padding: "5px 10px"
      }
    }
  }
})

const emits = defineEmits(["update:searchData"])
const formdata = ref({})
for (const itemdata in props.searchData) {
  formdata.value[itemdata] = computed({
    get: () => {
      return props.searchData[itemdata]
    },
    set: newval => {
      emits("update:searchData", { ...formdata.value, [itemdata]: newval })
    }
  })
}

// 拆开子组件的v-model
// :model-value="props.searchData[item.filed]"  @update:modelValue="valChange(item.filed, $event)"

// const valChange = (filed, val) => {
//   console.log(filed, val)
//   console.log({ ...props.searchData })
//   emits("update:searchData", { ...props.searchData, [filed]: val })
//   console.log({ ...props.searchData, [filed]: val })
// }
</script>

<style lang="scss" scoped>
.screen {
  border-bottom: 1px solid #e5e5e5;
  background: #fff;
  .search-form {
    margin-top: -1px;
    padding: 15px 10px;
  }
}
</style>
